import React, { useState, useEffect } from 'react'
import { Input, Radio, View, RadioGroup, Text, Button } from '@tarojs/components'
import { AtImagePicker, } from 'taro-ui'
import { upload } from '@/utils/upload'
import { Space } from '@/components/UiComponents'
import { AtIcon } from 'taro-ui'
import Taro from "@tarojs/taro";
import "taro-ui/dist/style/components/image-picker.scss";
import "taro-ui/dist/style/components/icon.scss";

const Upload = (props) => {
    const { data = {}, index, ChangeValue } = props
    const {
        title,
        label,
        require = false,
        desc,
        value = [],
        maxLength = 1
    } = data
    console.log(data.value, 'file')

    const chooseFile = async () => {
        Taro.chooseMedia({
            count: 1, // 默认选择一个文件
            mediaType: ['image', 'video'],
            sourceType: ['album', 'camera'],
            success: function (res) {
                // 获取文件的临时路径

                upload([...value, { url: res.tempFiles[0].tempFilePath }].map(c => c.url)).then(val => {
                    ChangeValue({
                        index,
                        value: {
                            value: val.map(o => {
                                return { url: o }
                            })
                        }
                    })
                })
                console.log(res.tempFiles[0].size)
            },
            fail: function (res) {
                console.log('选择文件失败', res);
            }
        });
    }
    const chooseUploadFile = async (url) => {
        Taro.chooseMedia({
            count: 1, // 默认选择一个文件
            mediaType: ['image', 'video'],
            sourceType: ['album', 'camera'],
            success: function (res) {
                // 获取文件的临时路径
                upload([res.tempFiles[0].tempFilePath]).then(val => {
                    ChangeValue({
                        index,
                        value: {
                            value: value.map(o => {
                                if (o.url === url) {
                                    return {
                                        url: val[0]
                                    }
                                }
                                return o
                            })
                        }
                    })
                })
                console.log(res.tempFiles[0].size)
            },
            fail: function (res) {
                console.log('选择文件失败', res);
            }
        });
    }
    return <View className='CollectWps_box_content'>
        <View className='CollectWps_label'>{require && <Text style={{ color: "red", right: 4 }}>*</Text>}{label}</View>
        <View className='CollectWps_desc'>{desc}</View>
        <Space direction='ver'>
            {
                value.map((item, c) => {
                    return <View key={c} className='font_hide CollectWps_file'>
                        <View onClick={(e) => {
                            e.stopPropagation()
                            chooseUploadFile(item.url)
                        }} className='CollectWps_file_left font_hide'>
                            {item.url}
                        </View>
                        <View onClick={(e) => {
                            e.stopPropagation()
                            ChangeValue({
                                index,
                                value: {
                                    value: value.filter(val => {
                                        return val.url !== item.url
                                    })
                                }
                            })
                        }} className='fa'>删除</View>
                    </View>
                })
            }
            <Button onClick={() => { chooseFile() }}>添加文件</Button>
        </Space>
    </View >
}
export default Upload